<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .section {
            margin-bottom: 30px;
        }

        .title {
            color: #333;
            margin-bottom: 10px;
        }

        /* 基础容器样式 */
        .container {
            background-color: #f0f0f0;
            padding: 10px;
            margin-bottom: 20px;
        }

        /* Flex容器 */
        .flex-container {
            display: flex;
            background-color: #eee;
            margin-bottom: 10px;
            padding: 10px;
        }

        /* Flex项目 */
        .flex-item {
            background-color: #4CAF50;
            color: white;
            margin: 5px;
            padding: 10px;
            text-align: center;
        }

        /* 演示flex-direction */
        .direction-row {
            flex-direction: row;
        }
        .direction-column {
            flex-direction: column;
        }

        /* 演示justify-content */
        .justify-between {
            justify-content: space-between;
        }
        .justify-center {
            justify-content: center;
        }

        /* 演示align-items */
        .align-center {
            align-items: center;
            height: 100px;
        }
        
        /* 演示flex-wrap */
        .flex-wrap {
            flex-wrap: wrap;
        }

        /* 演示flex-grow */
        .grow-1 {
            flex-grow: 1;
        }
        .grow-2 {
            flex-grow: 2;
            background-color: #2196F3;
        }

        .description {
            background-color: #fff;
            padding: 10px;
            border-left: 4px solid #4CAF50;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Flex布局演示</h1>
    
    <div class="section">
        <h2 class="title">1. 基本的Flex容器</h2>
        <div class="description">
            默认的flex布局，项目在一行内显示（flex-direction: row）
        </div>
        <div class="flex-container">
            <div class="flex-item">项目1</div>
            <div class="flex-item">项目2</div>
            <div class="flex-item">项目3</div>
        </div>
    </div>

    <div class="section">
        <h2 class="title">2. flex-direction: column</h2>
        <div class="description">
            改变主轴方向为垂直方向
        </div>
        <div class="flex-container direction-column">
            <div class="flex-item">项目1</div>
            <div class="flex-item">项目2</div>
            <div class="flex-item">项目3</div>
        </div>
    </div>

    <div class="section">
        <h2 class="title">3. justify-content: space-between</h2>
        <div class="description">
            项目之间的间隔相等，两端对齐
        </div>
        <div class="flex-container justify-between">
            <div class="flex-item">项目1</div>
            <div class="flex-item">项目2</div>
            <div class="flex-item">项目3</div>
        </div>
    </div>

    <div class="section">
        <h2 class="title">4. align-items: center</h2>
        <div class="description">
            项目在交叉轴上居中对齐
        </div>
        <div class="flex-container align-center">
            <div class="flex-item">项目1</div>
            <div class="flex-item">项目2</div>
            <div class="flex-item">项目3</div>
        </div>
    </div>

    <div class="section">
        <h2 class="title">5. flex-wrap: wrap</h2>
        <div class="description">
            当一行放不下时，会自动换行
        </div>
        <div class="flex-container flex-wrap">
            <div class="flex-item">项目1</div>
            <div class="flex-item">项目2</div>
            <div class="flex-item">项目3</div>
            <div class="flex-item">项目4</div>
            <div class="flex-item">项目5</div>
            <div class="flex-item">项目6</div>
        </div>
    </div>

    <div class="section">
        <h2 class="title">6. flex-grow 演示</h2>
        <div class="description">
            flex-grow定义项目的放大比例，默认为0
        </div>
        <div class="flex-container">
            <div class="flex-item grow-1">flex-grow: 1</div>
            <div class="flex-item grow-2">flex-grow: 2</div>
            <div class="flex-item grow-1">flex-grow: 1</div>
        </div>
    </div>

    <div class="section">
        <h2>Flex布局的主要特点：</h2>
        <ul>
            <li>容器可以设置主轴方向（flex-direction）</li>
            <li>容器可以控制项目是否换行（flex-wrap）</li>
            <li>可以控制项目在主轴上的对齐方式（justify-content）</li>
            <li>可以控制项目在交叉轴上的对齐方式（align-items）</li>
            <li>项目可以单独设置大小比例（flex-grow）</li>
            <li>响应式布局，自动调整大小</li>
            <li>轻松实现垂直居中</li>
            <li>支持反向排列和多行排列</li>
        </ul>
    </div>
</body>
</html> 